<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">

		<title>Camera Example</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="20" style="height: 50px;">
						<van-search background="red" v-model="sousuo" placeholder="请输入搜索关键词" />					
					</van-col>
					<van-col span="4" style="height: 54px; background-color: red;">						
						<van-button style="margin-top: 12px;" size="small" @click="sous">搜索</van-button>
					</van-col>
				</van-row>
			</header>
			<van-row>
				<van-col span="6">
					<van-badge-group :active-key="activeKey" @change="onChange">
						<van-badge @click="change(item)" :title="item.Name" v-for="item in Categories">
						</van-badge>
					</van-badge-group>
				</van-col>
				<van-col span="18">
					<van-col span="12" v-for="item in products">
						<div style="width: 100%;">
							<img v-lazy="item.GoodsImageUrl" style="width: 100%;" alt="">
						</div>
						<div>
							{{item.Name}}
						</div>
						<div style="color: red; font-size: 20px;">￥{{item.RealPrice}}</div>
                        <div style="font-size: 12px; color: #7D7E80;">{{item.VirtualSaleCount}}&nbsp;&nbsp;&nbsp;&nbsp;<span>销量</span></div>
						<div style="font-size: 12px; color: #7D7E80;">{{item.BrowseCount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次浏览</div>
					</van-col>
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
				error: "../img/mai2.jpg"
			});
			var vm = new Vue({
				el: "#app",
				data: {
					sousuo:"",
					activeKey: 1,
					Categories: [],
					products: []
				},

				methods: {
					onChange: function(key) {
						this.activeKey = key;
					},
					change: function(item) {
						this.getProduct(this.Categories[this.activeKey].Id)
					},
					getCategories: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/Categories",
							dataType: "jsonp",
							success: function(res) {
								_this.Categories = res.Categories;
								_this.getProduct(_this.Categories[_this.activeKey].Id)
							}
						})
					},
					getProduct: function(id) {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsByCategoryId",
							dataType: "jsonp",
							data: {
								typeId: id,
								p: 1
							},
							success: function(res) {
								_this.products = res.Data;
							}
						})
					},
					sous:function(){
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsSearch",
							dataType: "jsonp",
							data: {
								name:vm.sousuo
							},
							success: function(res) {
								vm.products = res.Data;
							}
						})
					}
				},

				created() {

					this.getCategories();
					this.getProduct();

				}

			})
		</script>

	</body>

</html>

